<template>
<view>
	<view class="cameraComponents" v-if="!videoOver">
		<camera class="camera" device-position="back" flash="off" @error="error">
			<view class="cameraInner">
				<image class="cameraTip" v-show="showTipImage" src="/packageHome/static/cameraTip.png" />
			</view>
		</camera>
		<view class="cameraBottom">
			<view class="operate">
				<view @tap="takePhoto()" class="photo">
					<view class="circle">
					   <cmd-circle   cid="circle19" type="circle" :percent="number" :showInfo="false"  stroke-shape="round" stroke-color="#ffd300" stroke-background="#ffffff"></cmd-circle>
						<view class="circleInner" >
						   <view class="begin" v-if="isBegin"></view>
						   <view class="stop" v-else></view>
					   </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import { onMounted, onBeforeUnmount, computed, watch, reactive, defineComponent, toRefs,ref } from 'vue'
import store from '@/store'
import config from '@/hooks/useConfig.js'
import cmdCircle from "@/components/cmd-circle/cmd-circle.vue"

export default defineComponent({
    components:{
        cmdCircle
		
    },
    onLoad(option){
		if(option.medicalDetail) {
			this.medicalDetail = JSON.parse(option.medicalDetail)
		}
        this.setNavText(`00:${this.cameraTime}`)
    },
    onShow(){
        uni.$on("back", res => {
            if(res.data){
                this.cameraTime=10
                // this.isBegin = true
            }            
            uni.$off('back');
        })
    },
    setup() {
        const { prefix_image, prefix_api }=config()
        const data = reactive({
            number:0,
            cameraContext:uni.createCameraContext(),
            showTipImage:false,
            isBegin:true,
            imgSrc:'',
            videoSrc:'',
            videoOver:false,
			medicalDetail: {}
        })

        const setNavText = (text)=>{
            uni.setNavigationBarTitle({
                title: text
            })
        }
        const cameraTime=ref(10)
        let countDown = ()=>{
            let timer = setInterval(()=>{
                cameraTime.value-=1
                if(cameraTime.value<0){
                    clearInterval(timer)
                }
            },1000)
        }
        watch(cameraTime,(value)=>{
            let text
            if(value<0){
                text='00'
            }else{
                text=`0${value}`
            }
            setNavText(`00:${text}`)
            data.number=100 - value*10
        })
        onMounted(() => {
            uni.authorize({
                scope: 'scope.camera',
                success(e) {
					
                },
                fail(err){
                    uni.navigateBack()
                }
            })

        })
        onBeforeUnmount(() => {
			
        })
		
		// 上传文件
		const uploadVideo = (tempPath) => {
			return new Promise((resolve, reject) => {
				let baseUrl = import.meta.env.VITE_APP_API_URL
				uni.uploadFile({
					url: `${baseUrl}/v1/api/common/upload`,
					filePath: tempPath,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data)
						resolve(obj)
					}
				})
			})
		}
        const takePhoto = () => {
                const ctx = data.cameraContext
                ctx.startRecord({
                    timeoutCallback: '10',
                    success: () => {
                        data.isBegin = false
                        cameraTime.value = 10
                        countDown()
                    }
                });
                setTimeout(() => {
                    ctx.stopRecord({
                        compressed: true, // 启动视频压缩
                        success: ({tempThumbPath,tempVideoPath}) => {
                            data.cameraTime=10
                            data.number=0
                            data.isBegin = true
							let uploadArr = [tempThumbPath, tempVideoPath].map(item => uploadVideo(item))
							Promise.all(uploadArr).then(res => {
								data.imgSrc = res[0].data.fullurl
								data.videoSrc = res[1].data.fullurl
								uni.navigateTo({
								    url:`/pages/previewVideo/index?videoSrc=${data.videoSrc}&imgSrc=${data.imgSrc}&medicalDetail=${JSON.stringify(data.medicalDetail)}`
								})
							})
                        }
                    })
                }, 11000)
        }
        const error = (e) => {
            console.log(e.detail);
        }
        return {
            ...toRefs(data),
            takePhoto,
            error,
            setNavText,
            cameraTime,
			uploadVideo
        }
    }
})
</script>
<style lang="stylus" scoped>
.cameraComponents{
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: #000;
    padding-top:5vh;
    .camera{
        width 100%;
        height: calc(70vh);
        .cameraInner{
            position: relative;
            width 100%;
            height: 100%;
            .cameraTip{
                width: 680rpx;
                height: 430rpx;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }
    }
    .cameraBottom{
        height: 25vh
        display: flex;
        align-items: center;
        justify-content: space-between;
        color:#fff;
        box-sizing: border-box;
        // padding 0 22rpx
        >view{
            flex:1
            text-align: center
        }
        .operate {
        	width 160rpx;
        	height: 160rpx;
        	.photo{
        		display: flex;
        		justify-content: center;
        	}
        	.circle{
        		display: flex;
        		justify-content: center;
        		align-items: center;
        		position: relative;
        		// background: #f3f3f3;
        		overflow: hidden;
        		width: 160rpx;
        		height: 160rpx;
        	}
        	.circleInner{
        		position: absolute;
        		// text-align: center;
        		/* top: 25%; */
        		/* top: 21rpx; */
        		top: 50%;
        		transform: translate(-50%, -50%);
        		left: 50%;
        		width: 116rpx;
        		height: 116rpx;
        		display: flex;
        		justify-content: center;
        		align-items: center;
        	}
        	.begin {
        		width: 116rpx;
        		height: 116rpx;
        		background: #FFD300;
        		border-radius: 50%;
        		position: absolute;
        		top: 0rpx;
        		left: 0rpx;
        	}
        
        	.stop {
        		width: 60rpx;
        		height: 60rpx;
        		background: #FFD300;
        		border-radius: 16rpx;
        	}
        }
        .tipAudio{
            display: flex;
            flex-direction: column
            align-items: center
            font-size: 28rpx;
            image{
                width 52rpx;
                height: 52rpx;
                margin-bottom:8rpx
            }
        }
        .stopAudio{
            box-sizing: border-box
            // text-align:right
            text{
                display: inline-block
                box-sizing: border-box
                border-radius: 16px;
                border: 1px solid #FFFFFF; 
                padding 8rpx 30rpx
                font-size: 28rpx;
                font-weight: 400;
                color: #FFFFFF;
            }
        }

    }
    .cameraBottomEnd{
        display: flex;
        flex-wrap: wrap;
        padding 40rpx 32rpx 0;
        .tag{
            .addTag{
                border-radius: 4rpx;
                // opacity: 0.2;
                border: 2rpx solid rgba(255,255,255,.2);
                font-size: 26rpx;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 38rpx;
                display: flex;
                align-items: center
                padding 8rpx 16rpx
                image{
                    width 32rpx;
                    height: 32rpx;
                }
            }
            .tagSelect{
                height: 102rpx;
            }
        }
        .bottom{
            width:100%
            display: flex
            justify-content: space-between
            .btn{
                line-height:96rpx;
                text-align: center;
                font-size:34rpx;
                color:#111
            }
            .reTakephoto{
                width: 280rpx;
                height: 96rpx;
                border-radius: 48rpx;
                border: 3rpx solid #FFFFFF;
                color:#fff
            }
            .isEnd{
                width: 382rpx;
                height: 96rpx;
                background: #FFD300;
                border-radius: 48rpx;
            }
        }

    }
}

</style>